<template>
    <div class="expandable">
        <div class="expandable__header">
            <div class="expandable__toggle" v-on:click="open = !open">
                <div v-if="open">-</div>
                <div v-if="!open">+</div>
            </div>
            <div class="expandable__title">
                {{ name }}
            </div>
        </div>

        <div class="expandable__content" v-bind:class="{'expandable__content--hide': !open}">
            <slot></slot>
        </div>

    </div>
</template>
<script>
    export default {

        props: [
            'name'
        ],

        data() {
            return {
                open: {
                    default: true
                }
            }
        }

    }
</script>